@import url('./reset.css');
@import url('./animate.min.css');
@import url('./swiper-bundle.min.css');
@import url('./font/iconfont.css');
html{
    scroll-behavior: smooth;
}
@font-face {
    font-family:HONORSans-Regular;
    src: url(./fonts/HONORSans-Regular.ttf);
}
@font-face {
    font-family:HONORSans-Bold;
    src: url(./fonts/HONORSans-Bold.ttf);
}
@font-face {
    font-family:HONORSans-Medium;
    src: url(./fonts/HONORSans-Medium.ttf);
}
@font-face {
    font-family:HONORSans-ExtraBold;
    src: url(./fonts/HONORSans-ExtraBold.ttf);
}
@font-face {
    font-family:HONORSans-Demibold;
    src: url(./fonts/HONORSans-Demibold.ttf);
}
.gotop {
    position: fixed;
    right: 50px;
    bottom: 50px;
    z-index: 99999;
    visibility: hidden;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
    width: 50px;
    height: 50px;
    // border-radius: 10%;
    background-color:  #000000;
    color: #ffffff;
    text-align: center;
    transform: translateY(100%);
    font-size: 18px;
    line-height: 50px;
    opacity: 0;
    transition: all 0.5s;
    cursor: pointer;
    em{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        color: #fff;
        font-size: 12px;
        opacity: 0;
        -webkit-transform: translateY(10px);
        -o-transform: translateY(10px);
        transform: translateY(10px);
        transition: all 0.5s;
        filter: alpha(opacity=0);
        -ms-transform: translateY(10px);
    
    }  
    &::before{
        display: block;
        content: '↑';
        font-family: 'fontawesome';
        transition: all 0.5s;
    } 
    &:hover{
        &::before{
            opacity: 0;
            transform: translateY(-15px) scale(.5);
            filter: alpha(opacity=0);
            transition: all 0.5s;
        }
        em{
            opacity: 1;
            transform: none;
            transition: all 0.5s;
        }
    }
}
.gotop.active{
    visibility: visible;
    opacity: 1;
    -webkit-transform: none;
    -moz-transform: none;
    -o-transform: none;
    transform: none;
    -ms-transform: none;
    transition: all 0.5s;
}
.index_layout{
    width: 1440px;
    margin: 0 auto;
}

@keyframes down{
    0%{
        transform:translateX(-50%) translateY(0);
    }
    50%{
        transform:translateX(-50%) translateY(-20px);
    }
   100%{
        transform:translateX(-50%) translateY(0);
    }
}
@keyframes up {
    0% {
        opacity: 1;
        transform: translateY(120%);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}
@keyframes markdown{
    0%{
        transform: translateY(0);
    }
    50%{
        transform: translateY(-5px);
    }
   100%{
        transform:translateY(0);
    }
}


.container{
    font-family: HONORSans-Regular;
    .index_title{
        font-size: 55px;
        font-family: HONORSans-ExtraBold;
        color: #022156;
        span{
            background: linear-gradient(to right,#65B93C, #07B4CC);
            background-clip: text;
            -webkit-background-clip: text; /* 对于WebKit浏览器 */
            color: transparent;
        }
    }
    .btn_more{
        display: inline-block;
        background: linear-gradient(to right,#65B93C, #07B4CC);
        border-radius: 45px;
        a{
            padding: 10px 40px ;
            width: 100%;
            display: flex;
            align-items: center;
            color: #fff;
            gap: 20px;
            font-size: 20px;
            img{
                filter:brightness(0) invert(1);
            }
        }
        &:hover{
            background-image: url(../img/images/more.png);
            background-size: 100% 100%;
            background-repeat: no-repeat;
            a{
                background: linear-gradient(to right,#65B93C, #07B4CC);
                background-clip: text;
                -webkit-background-clip: text; /* 对于WebKit浏览器 */
                color: transparent;
                img{
                    filter:none;
                }
            }
        }
    }
    // 首页导航
    .index_head,.page_head {
        position: fixed;
        font-family:HONORSans-Regular;
        z-index: 99;
        width: 100%;
        position: relative;
        .head_holder {
            display: none !important;
        }
        .Wrapper {
            width: 85vw;
            margin: 0 auto;
            display: flex;
            align-items: center;
            .head{
                padding-top: 10px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                width: 100%;
                gap: 0;
                // position: relative;
            }
            .logo{
                float: left;
                display: flex;
                align-items: center;
                a {
                    img{
                       width: 100%;
                       padding: 10px 0;
                       filter: invert(1);
                    }
                    font-size: 30px;

                   
                }
            }
            .webWrap{
                display: flex;
                gap: 30px;
                align-items: center;
            }
            .web_nav {
                >ul{
                    display: flex;
                    height: 70px;
                    gap: 0 2vw;
                    transition: all 0.3s;
                    justify-content: flex-start;
                    >li {
                        >a {
                            height: 100%; 
                            font-size:20px;
                            font-weight:500;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            color: #fff;
                            >em{
                                width: 100%;
                                // padding: 10px 0;
                            }
                            >b {
                                
                                margin-left: 4px;
                                &::after {
                                    content: '';
                                    content: '\f107';
                                    font-family: 'fontawesome';
                                    // transition: all 0.5s;
                                }
                            }
    
                        }
                        // 一级lihover
                        &:hover {
                            >a {
                                background: linear-gradient(to right,#65B93C, #07B4CC);
                                background-clip: text;
                                -webkit-background-clip: text; /* 对于WebKit浏览器 */
                                color: transparent;
                                >b {
                                    transform: rotate(180deg);
                                    &::after {
                                        border-color:#000 ;
                                        border-left-color: transparent;
                                        border-right-color: transparent;
                                    }
    
                                }
                            }
                        }
                        >ul{
                            position: absolute;
                            width: 100%;
                            left: 0;
                            background-color: #fff;
                            gap: 0 2vw;
                            padding: 20px 10vw;
                            display: none;
                            justify-content: center;
                            flex-wrap: wrap;
                            li{

                                a{
                                    color: #000;
                                    font-size:18px;
                                    >em{
                                        width: 100%;
                                        // padding: 10px 0;
                                    }
                                }
                            }
                        }
                        .show_list{
                            display: flex;
                            background-color: #fff;
                        }

    
                    }
                   
                    .nav-current {
                        >a{
                            background: linear-gradient(to right,#65B93C, #07B4CC);
                            background-clip: text;
                            -webkit-background-clip: text; /* 对于WebKit浏览器 */
                            color: transparent;
                        }
                    }
                }
                
            }
            .head_form{
                display: flex;
                align-items: center;
                justify-content: space-between;
                transition: all 0.3s;
                .head_search{
                    .btn--search{
                        display: block;
                        flex: 0 20%;
                        width: 25px;
                        height: 25px;
                        background-repeat: no-repeat;
                        background-size: cover;
                        background-image: url(../img/search_btn.png);
                        filter: invert(0);
                    }
              
                }
                .country{
                    display: flex;
                    align-items: center;
                    height: 100%;
                    // line-height: 120px;
                     padding:0 0 0 1vw;
                    //  border-left: 2px solid #b9b9b9;
                     .change-language{
                        position: relative;
                        .language-flag span{
                            color: #fff;
                        }
                    }
                }
                

            }
            .product_menu{
                position: absolute;
                left: 0;
                top: 100%;
                width: 100%;
                display: none;
                .down_menu{
                    display: flex;
                    min-height: 500px;
                    max-height: 580px;
                    box-sizing: border-box;
                    .left_list{
                        flex: 0 25%;
                        background-color: #F9F9F9;
                        padding:2vw 2vw 2vw 4vw;
                        >ul{
                            display: flex;
                            flex-direction: column;
                            gap: 20px;
                            li{
                                a{
                                    font-size: 18px;
                                    color: #000;
                                }
                                &:hover{
                                    a{
                                        background: linear-gradient(to right,#65B93C, #07B4CC);
                                        background-clip: text;
                                        -webkit-background-clip: text; /* 对于WebKit浏览器 */
                                        color: transparent;
                                    }
                                   
                                }
                            }
                            .active{
                                a{
                                    background: linear-gradient(to right,#65B93C, #07B4CC);
                                    background-clip: text;
                                    -webkit-background-clip: text; /* 对于WebKit浏览器 */
                                    color: transparent;
                                }
                            }
                        }
                    }
                    .right_item{
                        flex: 0 75%;
                        background-color: #fff;
                        .itemWrap{
                            display: flex;
                            height: 100%;
                            .list_title{
                                font-size: 22px;
                                color: #022156;
                                text-transform: capitalize;
                                font-family:HONORSans-Bold;
                            }
                            .left{
                                padding: 2vw 3vw;
                                box-sizing:border-box;
                                flex: 0 40%;
                                height: 100%;
                                border-right: 1px solid #e6e6e6;
                                .solution_img{
                                    margin-top:20px;
                                    .imgWrap{
                                        position: relative;
                                        width: 100%;
                                        padding-top: 60%;
                                        border-radius: 10px;
                                        overflow: hidden;
                                        img{
                                           position: absolute;
                                           top: 0; 
                                           left: 0;
                                           width: 100%;
                                           height: 100%;
                                           object-fit: cover;
                                        }
                                    }
                                    .more{
                                        margin-top: 20px;
                                        display: flex;
                                        justify-content: space-between;
                                        background: linear-gradient(to right,#65B93C, #07B4CC);
                                        background-clip: text;
                                        -webkit-background-clip: text; /* 对于WebKit浏览器 */
                                        color: transparent;
                                        font-family:HONORSans-Regular;
                                        font-size: 18px;
                                        .title{
                                            color: #022156;
                                            font-size: 20px;
                                            font-family:HONORSans-Bold;
                                        }
                                    }
                                }
                            }
                            .right{
                                box-sizing:border-box;
                                padding: 2vw;
                                flex: 0 58%;
                                height: 100%;
                                .product_list{
                                    height: 100%;
                                    overflow-y: scroll;
                                    &::-webkit-scrollbar {
                                        width: 5px; 
                                      
                                    }
                                    &::-webkit-scrollbar-thumb {
                                        background: linear-gradient(to bottom,#65B93C, #07B4CC);
                                        border-radius: 10px; /* 滑块的圆角 */
                                        border: 1px solid #fff; /* 滑块的边框 */
                                    }
                                }
                                .list{
                                    display: flex;
                                    flex-wrap: wrap;
                                    margin-top: 10px;
                                    li{
                                        flex: 0 33.333%;
                                        padding:10px;
                                        a{
                                            background-color: #f3f3f3;
                                            width:100%;
                                            padding-bottom: 5px;
                                            display: block;
                                            transition: all .3s;
                                            border-radius: 5px;
                                            .imgWrap{
                                                width: 100%;
                                                height: 180px;
                                                display: flex;
                                                justify-content: center;
                                                align-items: center;
                                                padding: 10px 15px;
                                                transition: all .3s;
                                                
                                                img{
                                                    max-width: 100%;
                                                    max-height: 180px;
                                                    transition: all .3s;
                                                    // height: 100%;
                                                }
                                            }
                                            .title{
                                                padding-top: 5px;
                                                font-size: 16px;
                                                text-align: center;
                                            }
                                        }
                                        &:hover{
                                            a{
                                                background-color: #f3f3f3;
                                                transition: all .3s;
                                                .imgWrap{
                                                    background-color: #fff;
                                                    transition: all .3s;
                                                    img{
                                                        transform: translateY(-20px);
                                                        transition: all .3s;
                                                    }
                                                }
                                            }
                                        }
                                    }
                                }
                            }
                        }
                        .hide{
                            display: none;
                        }
                    }
                }
                
            }
           
        }
        &:hover{
            background-color: #fff;
            transition: all .3s;
            .Wrapper{
                .web_nav{
                    >ul{
                        >li{
                            >a{
                                color: #000;
                            }
                            &:hover {
                                >a {
                                    background: linear-gradient(to right,#65B93C, #07B4CC);
                                    background-clip: text;
                                    -webkit-background-clip: text; /* 对于WebKit浏览器 */
                                    color: transparent;
                                    transition: all .3s;
                                   
                                }
                               
                            }
                        }
                        .nav-current {
                            >a{
                                background: linear-gradient(to right,#65B93C, #07B4CC);
                                background-clip: text;
                                -webkit-background-clip: text; /* 对于WebKit浏览器 */
                                color: transparent;
                                transition: all .3s;
                            }
                        }
                    }
                }
                .head_form{
                    .head_search{
                        .btn--search{
                            filter: invert(100%);
                        }
                    }
                    .country{
                        .change-language{
                           .language-flag span{
                               color: #000;
                           }
                       }
                   }
                }
            }
        }
     
    }
    .index_head{
        background-color: transparent;
        position: fixed;
        .Wrapper{
           .logo{
                a{
                    img{
                      filter: invert(0);  
                    }
                }
           }
            .web_nav{
                ul {
                    > li{
                       
                        &:hover{
                            >a{
                              
                            }
                        }
                    } 
                    
                    .nav-current {
                        >a{
                           
                        }
                    }
                }
            } 
            .head_form{
                .head_search{
                    .btn--search{
                        filter: invert(0);
                    }
                } 
                .country{
                     .change-language{
                        .language-flag span{
                            color: #fff;
                        }
                    }
                }
            } 
            


        } 
    }
    .index_main{
        .bannerWrap{
            overflow: hidden;
            position: relative;
            background: white;
            z-index: 1;
            .banner_swiper{
                overflow: hidden;
                position: relative;
                .swiper-wrapper{
                    .swiper-slide{
                        position: relative;
                        .active_index{
                           
                            position: absolute;
                            bottom: 50px;
                            z-index: 20;
                            left: 10vw;
                            color: #fff;
                            font-size: 30px;
                            font-family:HONORSans-Bold;
                            overflow: hidden;
                            p{
                                opacity: 0;
                            }
                        }
                        .imgWrapper{
                            position: relative;
                            width: 100%;
                            height: 100%;
                            transition: 1s linear 2s;
                            // 这个slide大是整体缩小，小是整体放大
                            transform: scale(1.0,1.0);
                            img{
                                width: 100%;
                                height: 100%;
                            }
                            
                        }
                        .infoWrap{
                            opacity: 0;
                            transition: opacity .5s;
                            position: absolute;
                            top: 45%;
                            left: 50%;
                            transform: translate(-50%,-50%);
                            display: flex;
                            flex-direction: column;
                            justify-content: center;
                            align-items: center;
                            gap: 1vw;
                            color: #000;
                            font-family: HONORSans-Bold;
                           .title{
                                font-size: 3.5vw;
                                color: #fff;
                                overflow: hidden;
                           }
                           .desc{
                                font-size: 24px;
                                color: #fff;
                                overflow: hidden;
                           }
                          
                           .index_more{
                            margin-top: 40px;
                            opacity: 0;
                            padding: 10px 4vw;
                            background-color: transparent;
                            border-radius: 45px;
                            font-size: 16px;
                            color: #ffffff;
                            border: 1px solid #fff;
                            cursor: pointer;
                            display: flex;
                            align-items: center;
                            gap: 20px;
                            transition: all .5s;
                            font-weight: 500;
                            position: relative;
                            transition: all .3s;
                            &:hover{
                                border: 1px solid transparent;
                                background: linear-gradient(to right,#65B93C, #07B4CC);
                                transition: all .3s;
                                img{
                                    filter:brightness(0) invert(1);
                                }
                            }
    
                        }
                        }
                       
                    }
                    
                    .swiper-slide-active{
                        .imgWrapper{
                            transition: 3s linear;
                            transform: scale(1.05);
                        }
                        .active_index{
                            p{
                                opacity: 1;
                                animation: .8s cubic-bezier(.26,.54,.32,1) .4s forwards;
                                animation-name: up;
                            }
                        }
                        .infoWrap{
                            opacity: 1;
                            transition: opacity .5s;
                            transition-delay:.5s;
                            .title{
                                p{
                                    opacity: 1;
                                    animation: .8s cubic-bezier(.26,.54,.32,1) .4s forwards;
                                    animation-name: up;
                                }
                            }
                            .desc{
                                p{
                                    opacity: 1;
                                    animation: 1s cubic-bezier(.26,.54,.32,1) .4s forwards;
                                    animation-name: up;
                                }
                            }
                            .index_more{
                                opacity: 1;
                                transition: all 1s;
                            }
                           
                        }
                        
                    }
                    
                }
                .swiper-pagination{
                    width: auto;
                    display: inline;
                    bottom: 50px;
                    right: 10vw;
                    left: auto;
                    .swiper-pagination-bullet{
                        width: 15px;
                        height: 15px;
                        margin: 0 10px;
                        background-color: #ffffff86;
                        opacity: 1;
                    }
                    .swiper-pagination-bullet-active{
                        background-color: #ffffff;
                    }
                 
                }
            }
            .down{
                width: 22px;
                height: 54px;
                position: absolute;
                bottom:50px;
                left: 50%;
                transform: translateX(-50%);
                z-index: 20;
                animation: down 2s infinite ease-in-out;
            }
        }
        .whoWrap{
            position: relative;
            z-index: 2;
            background-color: #F3F3F3;
            background-image: url(../img/images/who_bg.png);
            padding: 5vw 0 ;
            min-height: 950px;
            // background-repeat: no-repeat;
            .who_content{
                &::after{
                    content: "";
                    width: 150px;
                    height: 10px;
                    display: block;
                    background-color: #6FBA2C;
                    margin-top:2vw;
                }
                .desc{
                    font-family:HONORSans-Demibold;
                    font-size: 22px;
                    margin-bottom: 20px;
                }
            }
            .who_center{
                position: relative;
            }
            .video{
                position: relative;
                top: 0;
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-left: calc((100% - 1440px) / 2);
                .left{
                    flex: 0 42%;
                    display: flex;
                    flex-direction: column;
                    align-items: flex-start;
                    transform: translateX(0%);
                    .desc{
                        font-size: 16px;
                       
                        p{
                            line-height: 2;
                            color: #000;
                            font-family: HONORSans-ExtraBold;
                            span{
                                color: #666666;
                                 font-family:HONORSans-Medium;
                            }
                        }
                    }
                    .more{
                        margin-top: 20px;
                        overflow: hidden;
                        border-radius: 45px;
                        a{
                            height: 100%;
                            font-size: 20px;
                            border-radius: 15px; /*trciky part*/
                            padding: 10px 40px;
                            display: flex;
                            align-items: center;
                            gap: 15px;
                            background: linear-gradient(to right,#65B93C, #07B4CC);
                            background-clip: text;
                            -webkit-background-clip: text; /* 对于WebKit浏览器 */
                            color: transparent;
                            transition: all .3s;
                            position: relative;
                            font-family: HONORSans-Medium;
                            &::before{
                                position: absolute;
                                top: 0;
                                left: 0;
                                content: "";
                                width: 100%;
                                height: 100%;
                                display: block;
                                background-image: url(../img/images/more.png);
                                background-size: 100% 100%;
                                background-repeat: no-repeat;
                            }
                            img{
                                // transition: all .3s;
                            }
                        }
                        &:hover{
                            a{
                                background: linear-gradient(to right,#65B93C, #07B4CC);
                                transition: all .3s;
                                color: #fff;
                              img{
                                filter:brightness(0) invert(1);
                                // transition: all .3s;
                              }
                            }
                        }
                    }
                }
                .right{
                    transform: translateX(0%);
                    flex: 0 50%;
                    border-radius:40px 0 0 150px;
                    margin-top: -30px;
                    overflow: hidden;
                    .videoWrap{
                        width: 100%;
                        padding-top: 60%;
                        position: relative;
                        iframe{
                            width: 100%;
                            height: 100%;
                            object-fit: cover;
                            position: absolute;
                            left: 0;
                            top: 0;
                        }
                    }

                }
            }
            .num{
                width: 80%;
                position: absolute;
                opacity: 0;
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-left: calc((100% - 1440px) / 2);
                .left{
                    flex: 0 42%;
                    ul{
                        display: flex;
                        flex-wrap: wrap;
                        gap: 20px 0;
                        li{
                            flex: 0 50%;
                            h3{
                                font-size: 24px;
                                color: #000;
                                span,b{
                                    font-family: HONORSans-ExtraBold;
                                    font-size: 60px;
                                    color: #022156;
                                } 
                            }
                            p{
                                font-size: 18px;
                                color: #666;
                            }
                        }
                    }
                }
                .right{
                    flex: 0 55%;
                    .mapWrap{
                        width: 100%;
                        padding-top: 65%;
                        position: relative;
                        margin-top: -3vw;
                        >img{
                            position: absolute;
                            top: 0;
                            width: 100%;
                            height: 100%;
                            object-fit: contain;
                        }
                        .markWrap{
                            position: absolute;
                            top: 0;
                            width: 100%;
                            height: 100%;
                            .mark{
                                position: absolute;
                                display: flex;
                                align-items: center;
                                color: #022156;
                                font-size: 16px;
                                text-transform: uppercase;
                                font-family: HONORSans-DemiBold;
                                cursor: pointer;
                                animation: markdown 2s infinite ease-out; 
                                animation-play-state: paused;
                                transition: all .4s; 
                                img{
                                    width: 33px;
                                    height: 32px;
                                }
                                &:hover{
                                    transition: all .3s;
                                    animation-play-state: running;
                                    color: #000;
                                    img{
                                        filter: brightness(0) invert(0);
                                    }
                                }
                            }
                            .mark01{
                                top:38%;
                                left: 36%;
                               
                            }
                            .mark02{
                                top: 26%;
                                left: 11%;
                            }
                            .mark03{
                                top: 33%;
                                left:-2%;
                                flex-direction: row-reverse;
                            }
                            .mark04{
                                top: 33%;
                                left: 9%;
                            }
                            .mark05{
                                top: 40%;
                                left: 77%;
                            }
                        }
                    }
                    
                }
               
            }
           
        }
        .whobottom{
            height: 800px;
            position: relative;
            width: 100%;
        }
        .cateWrap{
            position: relative;
            padding:4vw 0;
            z-index: 2;
            background-color: #fff;
            .index_title{
                text-align: center;
            }
            .cateSwiper{
                margin-top: 60px;
                overflow: hidden;
                .swiper-slide{
                    max-width: 25%;
                    // animation:fadeInUp;
                    // animation-duration: 1s;
                    a{
                        .imgWrap{
                            width: 100%;
                            padding-top:130%;
                            position: relative;
                            border-radius: 30px;
                            overflow: hidden;
                            img{
                                transition: all .5s;
                                position: absolute;
                                top: 0;
                                width: 100%;
                                height: 100%;
                                object-fit: cover;
                            }
                        }
                        .title{
                            font-family: HONORSans-ExtraBold;
                            font-size: 18px;
                            margin: 20px 0 10px 0;
                            text-align: center;
                        }
                        .more{
                            text-decoration: underline;
                            font-family: HONORSans-Medium;
                            font-size: 16px;
                            text-align: center;
                        }
                        &:hover{
                            .imgWrap{
                                img{
                                    transform: scale(1.1);
                                    transition: all .5s;
                                }
                            }
                            .title{
                                color: #022156;
                            }
                            .more{
                                color: #022156;
                            }
                        }
                    }
                    &:nth-child(2){
                        animation-duration: 1.4s;
                    }
                    &:nth-child(3){
                        animation-duration: 1.8s;
                    }
                    &:nth-child(4){
                        animation-duration: 2.2s;
                    }
                }
            }
        }
        .solutionWrap{
            padding: 4vw 0;
            .Wrap{
                margin-left: calc((100% - 75vw)/2);
                display: flex;
                flex-direction: column-reverse;
                // animation:fadeInUp;
                // animation-duration: 2s;
                .solution_list{
                    width:75vw;
                    border-bottom: solid 2px #dedede;
                    display: flex;
                    margin-top: 30px;
                    li{
                        flex: 1 auto;
                        font-size: 24px;
                        font-family: HONORSans-DemiBold;
                        color: #000;
                        cursor: pointer;
                        span{
                           padding: 20px 10px;
                           display: inline-block;
                           position: relative;
                        }
                    }
                    .current{
                        span{
                            background: linear-gradient(to right,#65B93C, #07B4CC);
                            background-clip: text;
                            -webkit-background-clip: text; /* 对于WebKit浏览器 */
                            color: transparent;
                            &::before{
                                content: "";
                                position: absolute;
                                bottom: -2px;
                                display: block;
                                width: 100%;
                                height: 2px;
                                background: linear-gradient(to right,#65B93C, #07B4CC);
                           }
                        }
                        
                    
                    }
                }
                .solution_tab{
                    overflow: hidden;
                    margin-top: 3vw;
                    .item{
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        .left{
                            flex: 0 35%;
                            display: flex;
                            flex-direction: column;
                            align-items: flex-start;
                            .title{
                                font-family: HONORSans-ExtraBold;
                                background: linear-gradient(to right,#65B93C, #07B4CC);
                                background-clip: text;
                                -webkit-background-clip: text; /* 对于WebKit浏览器 */
                                color: transparent;
                                font-size: 42px;
                                width:90%;
                            }
                            .desc{
                                margin: 20px 0 30px 0;
                                p{
                                    color: #666666;
                                    line-height: 2;
                                    font-size: 18px;
                                }
                               
                            }
                            .more{
                                background: linear-gradient(to right,#65B93C, #07B4CC);
                                border-radius: 45px;
                                color: #fff;
                                display: flex;
                                align-items: center;
                                gap: 20px ;
                                padding: 10px 40px;
                                font-size: 20px;
                                position: relative;
                                transition: all .3s;
                                font-family: HONORSans-Medium;
                                img{
                                    filter:brightness(0) invert(1);
                                }
                                &::before{
                                    position: absolute;
                                    top: 0;
                                    left: 0;
                                    content: "";
                                    width: 100%;
                                    height: 100%;
                                    display: block;
                                    background-image: url(../img/images/more.png);
                                    background-size: 100% 100%;
                                    background-repeat: no-repeat;
                                }
                                &:hover{
                                    transition: all .3s;
                                    background: linear-gradient(to right,#65B93C, #07B4CC);
                                    background-clip: text;
                                    -webkit-background-clip: text; /* 对于WebKit浏览器 */
                                    color: transparent;
                                    img{
                                        filter:none;
                                    }
                                }


                                
                            }
                        }
                        .right{
                            flex: 0 64%;
                            width: 64%;
                            position: relative;
                            padding-top: 27%;
                            &::after{
                                content: "";
                                display: block;
                                width: 30%;
                                height: 100%;
                                background-image: linear-gradient(to left,#fff, #ffffff00);
                                position: absolute;
                                right: 0;
                                top: 0;
                                z-index: 2;
                            }
                            &::before{
                                content: "";
                                display: block;
                                width: 30%;
                                height: 100%;
                                background-image: linear-gradient(to right,#fff, #ffffff00);
                                position: absolute;
                                left: 0;
                                top: 0;
                                z-index: 2;
                            }
                            img{
                                width: 100%;
                                height: 100%;
                                object-fit: cover;
                                position: absolute;
                                top: 0;
                                left: 0;
                            }
                        }
                        
                    }
                }
            }
        }
        .whyWrap{
            padding: 4vw 0;
            .index_title{
                text-align: center;
            }
            .swiperWrap{
                position: relative;
                margin-top: 4vw;
                .whySwiper{
                    overflow: hidden;
                    padding: 30px 0;
                    .swiper-slide{
                        display: flex;
                        flex-direction: column;
                        max-width: 25%;
                        padding: 15px;
                        animation:fadeInUp;
                        animation-duration: 1s;
                        border: 1px solid #f3f3f300;
                        transition: all .5s;
                        border-radius: 30px;
                        .iconWrap{
                            height: 57px;
                            img{
                               height: 100%;
                               width: auto;
                            }
                        }
                        .title{
                            font-size:22px ;
                            font-family: HONORSans-DemiBold;
                            margin-top: 20px;
                        }
                        .desc{
                            margin: 10px 0;
                            p{
                                font-size: 16px;
                                line-height: 1.5;
                            }
                        }
                        a{
                            text-decoration: underline;
                            font-size: 16px;
                            color: #000;
                            font-family: HONORSans-Medium;
                        }
                        &:hover{
                           border: 1px solid #c4c4c4;
                           transform: translateY(-20px);
                           transition: all .5s;
                        }
                        &:nth-child(2){
                            animation-duration: 1.4s;
                        }
                        &:nth-child(3){
                            animation-duration: 1.8s;
                        }
                        &:nth-child(4){
                            animation-duration: 2.2s;
                        }

                    }
                    .why-next{
                        right:9vw;
                        color: #999;
                        &::after{
                            font-size: 30px;
                            font-weight: bold;
                        }
                    }
                    .why-prev{
                        font-size: 20px;
                        left:9vw;
                        color: #999;                        
                        &::after{
                            font-size: 30px;
                            font-weight: bold;
                        }
                    }
                }
            }
        }
        
        .customLogo{
            padding: 5vw 0;
            .customSwiper{
                overflow: hidden;
                .swiper-wrapper{
                    -webkit-transition-timing-function: linear !important;
                    -o-transition-timing-function: linear !important;
                    transition-timing-function: linear !important;
                }
                .swiper-slide{
                    max-width: 25%;
                    img{
                        max-width: 100%;
                    }
                }
            }
        }
        .CertificatesWrap{
            padding: 5vw 0;
            overflow: hidden;
            .index_title{
                text-align: center;
                color: #022156;
            }
            .index_layout{
                position: relative;
                .CertificateSwiper{
                    overflow: hidden;
                    margin-top: 3vw;
                    .swiper-slide{
                        max-width: 25%;
                    }
                    .certificate-next{
                        right:-3vw;
                        color: #999;
                        &::after{
                            font-size: 30px;
                            font-weight: bold;
                        }
                    }
                    .certificate-prev{
                        font-size: 20px;
                        left:-3vw;
                        color: #999;                        
                        &::after{
                            font-size: 30px;
                            font-weight: bold;
                        }
                    }
                }
            }
           
        }
        .index_case{
            padding:4vw 0 6vw 0;
            background-color: #f3f3f3;
            overflow: hidden;
            .index_title{
                text-align: center;
            }
            .Wrap{
                margin-left: calc((100% - 1440px) / 2);
                position: relative;
                margin-top: 2vw;

                &::after{
                    content: "";
                    display: block;
                    width:15%;
                    height: 100%;
                    background-image: linear-gradient(to left,#f3f3f3, #ffffff00);
                    position: absolute;
                    right: 0;
                    top: 0;
                    z-index: 2;
                }
                .caseSwiper{
                    overflow: hidden;
                    .swiper-slide{
                        padding:30px;
                        box-sizing: border-box;
                        a{
                            box-shadow: 0px 3px 32px 0px rgba(55, 55, 55, 0.22);
                            border-radius: 27px;
                            background-color: #fff;
                            width: 100%;
                            display: flex;
                            // align-items: center;
                            overflow: hidden;
                            .left{
                                flex: 0 48%;
                                width: 48%;
                                padding-top: 45%;
                                position: relative;
                                img{
                                    position: absolute;
                                    top: 0;
                                    width: 100%;
                                    height: 100%;
                                    object-fit: cover;
                                    max-width: 100%;
                                }
                            }
                            .right{
                                flex: 0 45%;
                                padding: 40px 30px;
                                .list{
                                    margin-bottom: 30px;
                                    .title{
                                        color: #022156;
                                        font-family: HONORSans-ExtraBold;
                                        font-size: 20px;
                                        margin-bottom:8px;
                                    }
                                    .desc{
                                        font-size: 16px;
                                        color: #666;
                                    }
                                }
                            }
                        }
                    }
                    .swiper-pagination{
                        top: auto;
                        bottom: -2vw;
                        .swiper-pagination-progressbar-fill{
                            background: linear-gradient(to right,#65B93C, #07B4CC);
                        }
                    }
                    .case-next{
                        right:5vw;
                        color: #999;
                        &::after{
                            font-size: 30px;
                            font-weight: bold;
                        }
                    }
                    .case-prev{
                        font-size: 20px;
                        left:-3vw;
                        color: #999;                        
                        &::after{
                            font-size: 30px;
                            font-weight: bold;
                        }
                    }
                }
            }
        }
        .index_news{
            padding: 4vw 0;
            .index_layout{
              position: relative;
              .newSwiper{
                margin-top: 4vw;
                overflow: hidden;
                .swiper-slide{
                    max-width: 33.333%;
                   
                    a{
                        display: flex;
                        flex-direction: column;
                        align-items: flex-start;
                        position: relative;
                        border-top: 2px solid #dedede;;
                        &::before{
                            content: "";
                            position: absolute;
                            top: -2px;
                            width: 0%;
                            height: 2px;
                            display: block;
                            background: linear-gradient(to right,#65B93C, #07B4CC);
                            transition: all .5s;
                        }
                        .date{
                            padding: 40px 0 20px 0;
                            font-family: HONORSans-Medium;
                            font-size: 18px;
                            color: #333;
                        }
                        .new_img{
                            width: 100%;
                            padding-top: 60%;
                            position: relative;
                            border-radius: 20px;
                            overflow: hidden;
                            img{
                                position: absolute;
                                top: 0;
                                width: 100%;
                                height: 100%;
                                object-fit: cover;
                                transition: all .5s;
                            }
                        }
                        .title{
                            margin: 20px 0;
                            font-family: HONORSans-DemiBold;
                            font-size: 20px;
                            color: #000000;
                            display: -webkit-box;
                            -webkit-line-clamp: 3;
                            -webkit-box-orient: vertical;
                            overflow: hidden;
                            text-overflow: ellipsis;
                        }
                    }
                    .more{
                        overflow: hidden;
                        border-radius: 45px;
                        height: 100%;
                        font-size: 20px;
                        padding: 10px 40px;
                        display: flex;
                        align-items: center;
                        gap: 15px;
                        background: linear-gradient(to right,#65B93C, #07B4CC);
                        background-clip: text;
                        -webkit-background-clip: text; /* 对于WebKit浏览器 */
                        color: transparent;
                        transition: all .3s;
                        position: relative;
                        font-family: HONORSans-Medium;
                        &::before{
                            position: absolute;
                            top: 0;
                            left: 0;
                            content: "";
                            width: 100%;
                            height: 100%;
                            display: block;
                            background-image: url(../img/images/more.png);
                            background-size: 100% 100%;
                            background-repeat: no-repeat;
                        }
                    }
                    &:hover{
                        a{
                            &::before{
                                width: 100%;
                                transition: all .5s;
                            }
                            .title{
                                background: linear-gradient(to right,#65B93C, #07B4CC);
                                background-clip: text;
                                -webkit-background-clip: text; /* 对于WebKit浏览器 */
                                color: transparent;
                            }
                            .new_img{
                                img{
                                    transform: scale(1.1);
                                    transition: all .5s;
                                }
                            }
                            
                        }
                        .more{
                            background: linear-gradient(to right,#65B93C, #07B4CC);
                            transition: all .3s;
                            color: #fff;
                            img{
                                filter:brightness(0) invert(1);
                            }
                        }
                    }
                    &:nth-child(2){
                        animation-duration: 1.4s;
                    }
                    &:nth-child(3){
                        animation-duration: 1.8s;
                    }
                    &:nth-child(4){
                        animation-duration: 2.2s;
                    }
                }
                
                .news-next{
                    right:-3vw;
                    color: #999;
                    &::after{
                        font-size: 30px;
                        font-weight: bold;
                    }
                }
                .news-prev{
                    font-size: 20px;
                    left:-3vw;
                    color: #999;                        
                    &::after{
                        font-size: 30px;
                        font-weight: bold;
                    }
                }
              }
             
            }
           
        }
    }
    .videoWrap{
        background-color: #F3F3F3;
        padding: 5vw 0 2vw 0;
        .index_layout{
            position: relative;
            .videoSwiper{
                overflow: hidden;
                padding-bottom: 3vw ;
                .swiper-slide{
                    max-width: 33.33333%;
                    cursor: pointer;
                    .iframeWrap{
                        width: 100%;
                        padding-top: 56%;
                        position: relative;
                        border-radius: 15px;
                        overflow: hidden;
                        iframe{
                            width: 100%;
                            height: 100%;
                            position: absolute;
                            top: 0;
                            left: 0;
                            object-fit: cover;
                        }
                    }
                    .title{
                        margin-top: 10px;
                        text-align: center;
                        font-size: 18px;
                        font-family:HONORSans-Medium;
                    }
                }
                .video-next{
                    right:-3vw;
                    color: #999;
                    &::after{
                        font-size: 30px;
                        font-weight: bold;
                    }
                }
                .video-prev{
                    font-size: 20px;
                    left:-3vw;
                    color: #999;                        
                    &::after{
                        font-size: 30px;
                        font-weight: bold;
                    }
                }
                .swiper-pagination{
                    .swiper-pagination-bullet{
                        width: 13px;
                        height: 13px;

                    }
                    .swiper-pagination-bullet-active{
                        background-color: #000;
                    }
                }
            }
            
        }
    }
    .index_faq{
        padding:5vw 0 5vw 0;
        .index_title{
            text-align: center;
        }
        .faq{
            margin-top: 3vw;
             ul{
                 display: flex;
                 flex-wrap: wrap;
                 justify-content: space-between;
                 li{
                    flex: 0 48%;
                     cursor: pointer;
                     position: relative;
                     padding:40px 40px 40px 20px;
                     width: 100%;
                     height: 100%;
                     display: flex;
                     flex-direction: column;
                     align-items: flex-start;
                     border-bottom: 1px solid #dedede;
                    //  background-color: #f1f1f1;
                     .question{
                         flex: 1;
                         margin-bottom: 0;
                         color: #000000;
                         font-size: 20px;

                         text-transform: capitalize;
                     }
                     .answer{
                         display: none;
                         margin-top: 20px;
                         margin-bottom: 0px;
                        color: #666666;
                        font-size: 16px;
                        line-height: 1.6;
                        span{
                            color: #000;
                            font-weight: bold;
                        }
                     }
                     &::before{
                         content: "";
                         width: 32px;
                         height: 32px;
                         background-image: url(../img/images/close.png);
                         font-size: 24px;
                         font-weight: bold;
                         box-sizing: border-box;
                         transform: rotate(-45deg);
                         position: absolute;
                         right: 20px;
                         top: 38px;
                         transition: all .3s;
                     }
                 }
                 .open{
                     &::before{
                        transform: rotate(0deg);
                        transition: all .3s;
                        background-image: url(../img/images/close_hover.png);
                     }
                     
                 }
                 
             }
         }
    }
    .index_inquiry{
        padding: 3vw 0;
        background-color: #f3f3f3;
        .Wrap{
            background-color: #fff;
            border-radius: 20px;
            overflow: hidden;
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            .left{
                padding: 40px;
                display: flex;
                flex-wrap: wrap;
                flex: 0 50%;
                .title{
                    flex: 0 100%;
                    font-family: HONORSans-DemiBold;
                    font-size: 33px;
                    padding:20px 0;
                }
                .item{
                    flex: 0 50%;
                    padding: 10px;
                    box-sizing: border-box;
                    h6{
                        font-family: HONORSans-DemiBold;
                        font-size: 16px;
                        margin-bottom:8px;
                    }
                    input,select,textarea{
                        width: 100%;
                        padding: 10px;
                        max-height: 100px;
                        resize: none;
                        font-size: 16px;
                        border-radius: 8px;
                        border: solid 1px #151717;
                        &::placeholder{
                            color: #999999;
                        }
                        
                    }
                    input[type="submit"]{
                        border: none;
                        width: auto;
                        color: #fff;
                        padding: 10px 50px;
                        font-size: 18px;
                        text-transform: capitalize;
                        background: linear-gradient(to right,#65B93C, #07B4CC);
                        position: relative;
                        transition: all .5s;
                        &:hover{
                          border-radius: 45px;
                          transition: all .5s;
                          box-shadow:5px 5px #022156;
                        }
                    }
                    select{
                        color: #999999;
                    }
                }
                .fullitem{
                    flex: 0 100%;
                }
            }
            .right{
                flex: 0 45%;
                img{
                    width: 100%;
                }
            }
        }
    }
    .page_banner{
        position: relative;
        img{
            width: 100%;
        }
        .page_title{
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            color: #fff;
            font-size: 45px;
            width: 100%;
            text-align: center;
        }
    }
    .solution_main{
        .index_title{
            text-align: center;
        }
       
        .solution_solution{
            padding: 5vw 0 3vw 0;
            display: flex;
            align-items: center;
            justify-content: space-between;
            .left{
                flex: 0 50%;
                width: 50%;
                padding-top: 35%;
                position: relative;
                border-radius: 20px;
                overflow: hidden;
                img{
                    position: absolute;
                    top: 0;
                    width: 100%;
                    height: 100%;
                    object-fit: cover; 
                }
            }
            .right{
                flex: 0 40%;
                display: flex;
                flex-direction: column;
                align-items: flex-start;
                .title{
                    font-size: 55px;
                    font-family: HONORSans-ExtraBold;
                    color: #022156;
                }
                .desc{
                    margin: 40px 0;
                    font-size: 16px;
                    line-height: 2;
                    color: #666;
                    b{
                        color: #000;
                        font-weight: bold;
                    }
                }
            }
        }
        .solution_key{
            padding:5vw 0;
            .keyWrap{
                display: flex;
                flex-direction: column;
                padding-top: 4vw;
                .list{
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    width: 100%;
                    li{
                        flex: 0 50%;
                        text-align:center;
                        padding: 15px 0;
                        font-size: 24px;
                        color: #000;
                        font-family: HONORSans-ExtraBold;
                        border-bottom: 2px solid #dedede;
                        position: relative;
                        cursor: pointer;
                        &::before{
                            position: absolute;
                            bottom: -2px;
                            content: "";
                            width: 0;
                            height: 2px;
                            display: block;
                            background: linear-gradient(to right,#65B93C, #07B4CC);
                        }
                    }
                    .active{
                        background: linear-gradient(to right,#65B93C, #07B4CC);
                        background-clip: text;
                        -webkit-background-clip: text; /* 对于WebKit浏览器 */
                        color: transparent;
                        &::before{
                            width: 100%;
                            transition: all .4s;
                        }
                    }
                }
                .itemWrap{
                    margin-top: 20px;
                    
                    .hide{
                        display: none;
                    }
                }

            }
            .item{
                .desc{
                    color: #666;
                    font-size: 16px;
                    line-height: 1.5;
                    text-align: center;
                    margin-top: 15px;
                }
                .Wrap{
                    margin:40px 0 ;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    .left{
                        flex: 0 45%;
                        color: #000;
                        .title{
                            font-size: 30px;
                            font-weight: bold;
                        }
                        .intro{
                            font-size: 16px;
                            color: #666;
                            margin-bottom: 15px;
                        }
                        h3{
                            color: #000;
                            font-size: 24px;
                            margin-bottom: 15px;
                        }
                        p{
                            font-size: 16px;
                            font-weight: bold;
                        }
                        span{
                            font-size: 16px;
                            display: block;
                            color: #666;
                        }
                        ul{
                            li{
                                margin-bottom: 15px; 
                            }
                        }
                    }
                    .right{
                        flex: 0 50%;
                        img{
                            width: 100%;
                        }
                    }
                }
                .system_img{
                  width: 100%;
                  margin-top: 60px;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                    img{
                        max-width: 100%;
                    }
                }
            }
        }
        .solution_key03{
            margin-top: 4vw;
            background-image: url(../img/page/key_bg.png);
            background-repeat: no-repeat;
            background-size: cover;
            padding: 5vw 0;
            position: relative;
            &::before{
                content: "";
                position: absolute;
                top: 0;
                width: 100%;
                height: 100%;
                z-index: 1;
                display: block;
                background-color: #00000062;
            }
            .index_title{
                color: #fff;
                position: relative;
                text-align: left;
                z-index: 2;
            }
            .keyWrap{
                flex-direction: column-reverse;
                z-index: 2;
                position: relative;
                padding-top: 2vw;
                .list{
                    position: relative;
                    margin-top: 40px;
                    li{
                        position: static;
                        border-bottom: none;
                        border-top: 1px solid #d9d9d9;
                        color: #fff;
                        flex: 0 25%;
                        font-size: 20px;
                        padding-top: 40px;
                        &::before{
                            // width: 25%;
                            left: 0;
                            top: -1px;
                            bottom: auto;
                        }
                        &:nth-child(1).active{
                            &::before{
                                width: 25%;
                                
                            }
                        }
                        &:nth-child(2).active{
                            &::before{
                                width: 50%;
                            }
                        }
                        &:nth-child(3).active{
                            &::before{
                                width: 75%;
                            }
                        }
                        &:nth-child(4).active{
                            &::before{
                                width: 100%;
                            }
                        }
                    }
                    
                    
                }
                .itemWrap{
                    position: relative;
                }
                .item{
                    opacity: 1;
                    transform: rotate(0);
                    transition: all 1s;
                    .Wrap{
                        margin-top: 0;
                        .left{
                            flex: 0 40%;
                            color: #fff;
                            h3{
                                color: #fff;
                            }
                            span{
                                color: #fff;
                            }
                            
                        }
                        .right{
                            display: none;
                           
                        }
                    }
                }
                .hide{
                    display: block !important;
                    position: absolute;
                    top: 0;
                    left: 0;
                    transform: rotateX(90deg);
                    transition: all 0s;
                    opacity: 0;
                }
                
            }
        }
        .solution_case{
            padding: 3vw 0 6vw 0;
            .index_layout{
                position: relative;
                .solutionlistSwiper{
                    overflow: hidden;
                    margin-top: 3vw;
                    .swiper-slide{
                        a{
                            display: flex;
                            flex-direction: column;
                            .imgWrap{
                                width: 100%;
                                padding-top: 60%;
                                position: relative;
                                border-radius: 20px;
                                overflow: hidden;
                                img{
                                    position: absolute;
                                    top: 0;
                                    width: 100%;
                                    height: 100%;
                                    object-fit: cover;
                                }
                            }
                            .title{
                                margin: 10px  0 ;
                                font-size: 20px;
                                font-family: HONORSans-DemiBold;
                                color: #000;
                            }
                            .desc{
                                font-size: 16px;
                                color: #666;
                            }
                        }
                    }
                }
            }
        }
        .solution_case02{
            padding: 5vw 0;
            .caseWrap{
                margin-top: 60px;
                .swiper-slide{
                    border-radius: 20px;
                    overflow: hidden;
                    display: flex;
                    background-color: #F3F3F3;
                    align-items: center;
                    .left{
                        width: 50%;
                        padding-top:50%;
                        position: relative;
                        img{
                            position: absolute;
                            top: 0;
                            width: 100%;
                            height: 100%;
                            object-fit: cover;
                        }
                    }
                    .right{
                        width: 50%;
                        padding: 40px;
                        box-sizing: border-box;
                        .title{
                            font-family: HONORSans-DemiBold;
                            font-size: 20px;
                            color: #000;
                        }
                        .desc{
                            font-size: 16px;
                            color: #666;
                        }
                    }
                }
            }
        }
        .videoWrap{
            .index_title{
                margin-bottom: 3vw;
            }
        }
        .solution_featured{
            padding: 6vw 0;
            .featured_info{
                margin-top: 50px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                .left{
                    flex: 0 45%;
                    width: 45%;
                    position: relative;
                    border-radius: 20px;
                    overflow: hidden;
                    padding-top: 30%;
                    iframe{
                        position: absolute;
                        top: 0;
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                    }
                }
                .right{
                    flex: 0 50%;
                    display: flex;
                    flex-direction: column;
                    align-items: flex-start;
                    ul{
                        margin-bottom: 40px;
                        li{
                            margin-bottom: 15px;
                            font-size: 16px;
                            p{
                                font-weight: bold;
                                margin-bottom: 10px;
                            }
                            span{
                                color: #666;
                            }
                        }
                    }
                    .list02{
                        display: flex;
                        flex-wrap: wrap;
                        li{
                            flex: 0 50%;
                        }
                    }
                    
                }
            }
            .index_layout{
                position: relative;
            }
            .featured_product{
                overflow: hidden;
                margin-top: 50px;
                .swiper-slide{
                    a{
                        position: relative;
                        .imgWrap{
                            img{
                                width: 100%;
                            }
                        }
                        .title{
                            position: absolute;
                            bottom: 20px;
                            left: 50%;
                            text-align: center;
                            width: 100%;
                            transform: translateX(-50%);
                            color: #fff;
                            font-size: 18px;
                        }
                    }
                }
               
            }

        }
        .solutionlistSwiper{
            .swiper-slide{
                max-width: 33.3333%;
            }
            .list-next{
                right:-3vw;
                color: #999;
                &::after{
                    font-size: 30px;
                    font-weight: bold;
                }
            }
            .list-prev{
                font-size: 20px;
                left:-3vw;
                color: #999;                        
                &::after{
                    font-size: 30px;
                    font-weight: bold;
                }
            }
        }
        .solution_why{
            padding: 4vw 0;
            .index_title{
                text-align: left;
            }
            .listWrap{
                .title_desc{
                    margin-top: 40px;
                    color: #666;
                    font-size: 20px;
                }
                ul.list{
                    display: flex;
                    flex-wrap: wrap;
                    margin:40px -15px ;
                    li{
                        flex: 0 50%;
                        padding: 10px 15px;
                       
                        .Wrap{
                            background-color: #f3f3f3;
                            padding: 30px;
                            border-radius: 15px;
                            overflow: hidden;
                            .icon{
                                margin-bottom: 15px;
                                img{
                                    width: auto;
                                    max-height:50px ;
                                }
                             
                            }
                            .title{
                                font-size: 20px;
                                color: #000;
                                margin: 15px 0;
                                font-family: HONORSans-DemiBold;
                            }
                            .desc{
                                p{
                                    font-size: 16px;
                                    color: #666;
                                    margin-bottom: 10px;
                                    b{
                                        color: #000;
                                        font-weight: bold;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
        .solution_why02{
            background-color: #f3f3f3;
            padding: 6vw 0 4vw 0;
            .index_title{
                text-align: center;
            }
            .listWrap{
                ul.list{
                    li{
                        .Wrap{
                            display: flex;
                            justify-content: space-between;
                            .icon{
                               width: 60px;
                                img{
                                    width: 50px;
                                    max-height: none;
                                }
                               
                            }
                            .info{
                              max-width: calc(100% - 80px);
                              .title{
                                margin:0 0 15px 0 ;
                              }
                              .desc{
                                p{
                                    margin-bottom: 0;
                                }
                              }
                            }
                        }
                    }
                    
                }
            }
        }
        .solution_workshop{
            padding: 4vw 0 ;
            .workShop{
                margin-top: 4vw;
                position: relative;
                .swiper-pagination{
                    bottom:-2vw;
                    .swiper-pagination-bullet{
                        width: 10px;
                        height: 10px;

                    }
                    .swiper-pagination-bullet-active{
                        background-color: #000;
                    }
                }
            }
        }
    }
    .about_main{
       
        .about_infoWrap{
            width: 1250px;
            margin: 0 auto;
            padding: 5vw 0;
            position: relative;
            .index_title{
                font-size: 65px;
                width: 90%;
                span{
                    display: block;
                }
            }
            .title_bg{
                font-size: 10vw;
                color: #000000;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%,-50%);
                font-family: HONORSans-ExtraBold;
                opacity: .1;
                z-index: -1;
            }
            .intro{
                margin-top: 40px;
                .company{
                    color: #022156;
                    font-family: HONORSans-ExtraBold;
                    font-size: 30px;
                }
            }
        }
    }
    footer{
        background-color: #022156;
        padding: 5vw 0;
        position: relative;
        z-index: 2;
       .web_footer{
            display: flex;
            flex-direction: column;
            color: #fff;
            .foot_logo{
                border-bottom: 1px solid #fff;
                padding-bottom: 40px;
                img{
                    max-width: 100%;
                    filter:brightness(0) invert(1);
                }
            }
            .foot_intro{
                display: flex;
                justify-content: space-between;
                margin-top: 60px;
                .list{
                    flex: 0 auto;
                    .title{
                        font-size: 22px;
                        color: #fff;
                        margin-bottom: 30px;
                    }
                }
                .foot_contact{
                    flex: 0 24%;
                    .item{
                        display: flex;
                        flex-direction: column;
                        gap: 20px;
                        li{
                            a{
                                color: #FFF;
                                display: flex;
                                gap: 10px;
                                align-items: center;
                                svg{
                                    width: 25px;
                                    height: 25px;
                                    path{
                                        fill:#fff
                                    }
                                }
                            }
                        }
                    }
                    .snslist{
                        display: flex;
                        align-items: center;
                        gap: 10px;
                        margin-top: 30px;
                        li{
                            a{
                                display: flex;
                                align-items: center;
                                justify-content: center;
                                width: 35px;
                                height: 35px;
                                transition: all .3s;
                                i{
                                    color: #fff;
                                    font-size: 25px;
                                }
                            }
                            &:hover{
                                a{
                                  transform: scale(1.1);
                                  transition: all .3s;
                                }
                            }
                            
                        }
                    }
                }
                .foot_nav{
                    
                    ul{
                        display: flex;
                        flex-direction: column;
                        gap: 20px;
                        li{
                            font-size: 16px;
                            a{
                                color: #fff;
                               
                            }
                            &:hover{
                                a{
                                    background: linear-gradient(to right,#65B93C, #07B4CC);
                                    background-clip: text;
                                    -webkit-background-clip: text; /* 对于WebKit浏览器 */
                                    color: transparent;
                                }    
                            }
                        }
                    }
                }
                .foot_input{
                    display: flex;
                    border-radius: 5px;
                    overflow: hidden;
                    margin-top: 2vw;
                    input{
                        flex: 0 80%;
                        padding: 10px;
                        border: none;
                        font-size: 16px;
                        &::placeholder{
                            color: #999999;
                        }
                    }
                    input[type="submit"]{
                        flex: 0 20%;
                        color: #fff;
                        background: linear-gradient(to right,#65B93C, #07B4CC);
                    }
                }
            }
       }
        .sj-footer{
            display: none;
            width: 100%;
            position: fixed;
            bottom: 0;
            background-color: #000;
            padding: 1vw 0;
            box-sizing: border-box;
            z-index: 999;
            height:70px;
            ul{
                width: 96%;
                margin: 0 auto;
                display: flex;
                justify-content: space-between;
                align-items: center;
                li{
                    a{
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        justify-content: center;
                        color: #fff;
                        font-size: 16px;
                        svg{
                            path{
                                fill: #fff;
                            }
                        }
                        &:hover{
                            text-decoration: none;
                        }
                    }
                    
                }
                #f-logo{
                    .imgWrap{
                        width:100px;
                        img{
                            width: 100%;
                            filter:brightness(0) invert(1);
                        }
                    }
                }
            }
        }
    }
    .fixed-nav {
        width: 100%;
        position: fixed !important;
        left: 0;
        top: 0;
        z-index: 99;
        -webkit-transition: none;
        -o-transition: none;
        transition: none;
        -webkit-transform: translateY(-100%);
        -ms-transform: translateY(-100%);
        -o-transform: translateY(-100%);
        transform: translateY(-100%);
        opacity: 1;
        background: rgba(255, 255, 255, 0.8);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#e5ffffff, endColorstr=#e5ffffff);
        box-shadow: 1px 0 1px rgba(0, 0, 0, .3);
       
    }
    // 头部
    .fixed-nav-active {
        -webkit-transform: none;
        -ms-transform: none;
        -o-transform: none;
        transform: none;
        opacity: 1;
        -webkit-transition: all 0.6s ease;
        -o-transition: all 0.6s ease;
        transition: all 0.6s ease;
        .Wrapper{
            .logo{
                a{
                    img{
                        filter: invert(0);
                    }
                }
               
            }
            .web_nav{
                ul {
                    > li{
                        > a{
                            color: #333;
                        }
                        &:hover{
                            >a{
                                // border-bottom: 1px solid #000;
                            }
                        }

                    } 
                    .nav-current{
                        >a{
                            // border-bottom: 1px solid #000;
                        }
                    }
                }
            } 
            .head_form{
                .head_search{
                    .btn--search{
                        filter: invert(100%);
                    }
                }
                .country{
                    .change-language{
                       .language-flag span{
                           color: #000;
                       }
                   }
               }
            }
        }
    }
}




.formWrap{
    .form_title{
        font-size: 18px;
        color: #fff;
        line-height: 3.5;
        background: #16873b;
        padding: 0 15px;
        font-weight: normal;
    }
    #form {
        background-color: #fff;
        // box-shadow: 0 0 10px #c5c5c5;
        padding: 0 22px 22px 22px;
        .list {
            margin-bottom: 15px;
            h6 {
                color: #2A2B32;
                font-size: 18px;
                line-height: 2;
                span {
                    color: #FF4236;
                  }
              }
            input {
                width: 100%;
                line-height: 3;
                padding-left: 10px;
                box-sizing: border-box;
                &::placeholder {
                    font-size: 16px;
                    
                }
            }
            textarea {
                width: 100%;
                box-sizing: border-box;
                padding: 10px;
                line-height: 2;
                resize: none;
                height: 120px;
                &::placeholder {
                    font-size: 16px;
                  }
              }
          }
         .sub {
            width: 30%;
            color: #fff;
            background-color: #16873b;
            border: none;
            // line-height: 3;
            padding: 10px 0;
            font-size: 20px;
            margin-bottom: 15px;
            border-radius: 45px;
            cursor: pointer;
          }
    }
}

@media screen and (max-width:1600px){
    .index_layout{
        width: 90vw;
    }
    .container{
        .index_title{
            font-size: 45px;
        }
        .index_main{
            .whoWrap{
                .who_center{
                    margin-top: 40px;
                }
                .video{
                    margin-left: calc((100% - 90vw) / 2);
                }
                .num{

                    width: 90%;
                    margin-left: calc((100% - 90vw) / 2);
                
                    .left{
                        ul{
                            li{
                                h3{
                                    span,b{
                                        font-size: 45px;
                                    }
                                }
                            }
                        } 
                    } 
                    
                } 
            } 
            .solutionWrap{
                .Wrap{
                    margin-left: calc((100% - 90vw) / 2);
                    .solution_list{
                        width: 90vw;
                        li{
                            font-size: 20px;
                        }
                    } 
                    .solution_tab{
                        .item{
                            .left{
                                .title{
                                    font-size: 35px;
                                }
                            } 
                        } 
                    } 
                }
            } 
            .whyWrap{
                .swiperWrap{
                    .whySwiper{
                        .why-next{
                            right: 10px;
                        }
                        .why-prev{
                            left: 10px;
                        }
                    } 
                } 
            } 
            .index_case{
                .Wrap{
                    margin-left: calc((100% - 90vw) / 2);
                    .caseSwiper .swiper-slide{
                        padding: 10px;
                        a{
                            box-shadow: 0px 3px 10px 0px rgba(55, 55, 55, 0.22);
                        }
                    }
                }
            } 
        } 
    }
    
}

@media screen and (max-width:1440px){
    .container{
        .index_title{
            font-size: 40px;
        }
        .index_head,.page_head{
            .Wrapper{
                width: 90vw;
                .web_nav{
                    .product_menu{
                        .down_menu{
                            .left_list{
                                flex: 0 30%;
                            }
                            .right_item{
                                flex: 0 70%;
                                .itemWrap{
                                    .right{
                                        .list{
                                            li{
                                                flex: 0 50%;
                                            }
                                        }
                                    } 
                                } 
                            } 
                        } 
                    }
                } 
            } 
        } 
        .index_main{
            .whobottom{
                height: 700px;
            }
        } 
    } 
}

@media screen and (max-width:1280px){
    .container{
        .index_head,.page_head{
            .Wrapper{
                .web_nav{
                    > ul{
                        > li{
                            > a{
                                font-size: 18px;
                            }
                        } 
                    } 
                } 
                .logo{
                    a{
                        img{
                            max-width: 200px;
                        }
                    }
                }
            } 
        } 
        .index_main{
            .whoWrap{
                padding: 80px 0;
                .num{
                 
                    .left{
                       
                        ul{
                            li{
                                p{
                                    font-size: 16px;
                                }
                                h3{
                                    span,b{
                                        font-size: 30px;
                                    }
                                }
                            }
                        } 
                    } 
                    
                } 
            } 
            .whobottom{
                height: 600px;
            }
            .cateWrap{
                .cateSwiper{
                    .swiper-slide{
                        max-width: 33.333%;
                    }
                } 
            } 
            .whyWrap{
                .swiperWrap{
                    .whySwiper{
                        .swiper-slide{
                            max-width: 33.333%;
                        }
                    } 
                } 
            } 
           
            .CertificatesWrap{
                .index_layout{
                    .CertificateSwiper{
                        .swiper-slide{
                            max-width: 33.333%;
                        }
                    } 
                } 
            } 
            .index_news{
                .index_layout .newSwiper .swiper-slide{
                    max-width: 50%;
                } 
            } 
           
           
        }
        .videoWrap{
            .index_layout{
                 .videoSwiper{
                    .swiper-slide{
                        max-width: 50%;
                    }
                 } 
            }
        } 
        .index_faq{
            .faq ul li::before{
                right: 10px;
            }
        } 
        .index_inquiry .Wrap{
            .left{
                flex: 0 100%;
            }
            .right{
                display: none;
            }
        } 
    } 
}

@media screen and (max-width:950px){
    .index_layout{
        width: 95vw;
    }
    .container{
        .index_title{
            font-size:25px;
            br{
                display: none;
            }
        }
        .index_main{
            margin-top: 60px;
            .bannerWrap{
                .banner_swiper{
                    .swiper-wrapper .swiper-slide{
                        .active_index{
                            bottom: 10px;
                        }
                        .infoWrap{
                            display: none;
                        }
                    } 
                    .swiper-pagination{
                        bottom: 10px;
                    }
                } 
                .down{
                    display: none;
                }
            } 
            .whoWrap{
                overflow: hidden;
                padding: 60px 0;
                .who_content{
                    .desc{
                        margin-bottom: 10px;
                    }
                }
                .who_center{
                    margin-top: 10px;
                    
                }
                .video{
                    width: 95vw;
                    flex-direction: column;
                    margin: 0 auto;
                    .left{
                        .desc{
                            display: -webkit-box;
                            -webkit-line-clamp: 5;
                            -webkit-box-orient: vertical;
                            overflow: hidden;
                            text-overflow: ellipsis;
                        }
                        .more{
                            margin: 5px 0 10px 0; 
                            a{
                                padding:5px 20px;
                                font-size: 16px;
                            }

                        }
                    }
                    .right{
                        width: 100%;
                        border-radius: 0;
                        margin-top: 0;
                        .videoWrap{
                            padding-top: 40%;
                        }
                    }
                }
                .num{
                    flex-direction: column;
                    .left ul li h3{
                        font-size: 24px;
                    }
                    .right{
                        width: 100%;
                        .mapWrap{
                            margin-top: 20px;
                            .markWrap{
                          
                                .mark{
                                    font-size: 14px;
                                }
                                .mark03{
                                    left: 0%;
                                    top: 24%;
                                    flex-direction: column-reverse;
                                }
                                .mark01{
                                    top: 31%;
                                    left: 35%;
                                }
                            } 
                        } 
                    }
                }
            }
            .whobottom{
                height: 500px;
            }
            .cateWrap{
                .cateSwiper .swiper-slide {
                    max-width: none;
                }
            } 
            .solutionWrap{
                .Wrap{
                    flex-direction: column;
                    .solution_list{
                        flex-direction: column;
                        border-bottom: none;
                    }
                    .solution_tab{
                         .item{
                            flex-direction: column-reverse;
                            .left{
                                .title{
                                    font-size: 25px;
                                }
                            }
                            .right{
                                flex:0 100%;
                                width: 100%;
                                padding-top: 55%;
                            }
                         }
                    }
                } 
            } 
            .whyWrap{
                .swiperWrap .whySwiper .swiper-slide{
                max-width: none;
            }
            } 
            .videoWrap{
                padding: 40px 0;
                .index_layout .videoSwiper{
                    padding-bottom: 40px;
                    .swiper-slide{
                        max-width: none;
                    }
                } 
            } 
            .customLogo{
                .customSwiper .swiper-slide{
                    max-width: none;
                }
            }
            .CertificatesWrap{
                .index_layout{
                    .CertificateSwiper{
                        .swiper-slide{
                            max-width: none;
                        }
                    } 
                } 
            } 
            .index_case{
                .Wrap{
                    margin-left: 0;
                    width: 95vw;
                    margin: 0 auto;
                    &::after{
                        display: none;
                    }
                     .caseSwiper{
                        .case-next{
                            right: -10px;
                        }
                        .swiper-slide a{
                            flex-direction: column;
                            .left{
                                flex: 0 100%;
                                width: 100%;
                                padding-top: 70%;
                            }
                     } 

                }
                }
            } 
            
            .index_news{
                .index_layout .newSwiper .swiper-slide{
                    max-width:none;
                    a .title{
                        font-size: 16px;
                    }
                } 
            } 
            
        }
        .index_faq{
            .faq{
                ul{
                    flex-direction: column;
                    li{
                        padding: 15px;
                        &::before{
                            top: 14px;
                        }
                        .question{
                            font-size: 16px;
                            margin-right: 30px;
                        }
                    }
                }
            } 
        } 
        .index_inquiry .Wrap .left{
            padding: 10px;
            flex-direction: column;
            .title{
                font-size: 25px;
            }
        }
       
        footer{
            padding: 0;
            height: 70px;
            .web_footer{
                display: none;
            }
            .sj-footer{
                display: block;
            }
        }
    }
    



    .index_head,.page_head {
        display: none;
      }
        
     .phone-head-item .title:before {
        font-family: "fontawesome";
        font-size: 23px;
        font-style: normal;
        font-weight: normal;
        speak: none;
        content: "";
        display: inline-block;
        text-decoration: inherit;
        font-variant: normal;
        text-transform: none;
      }
      .phone-head-item .title i{
          font-size: 22px;
      }
      .phone-body-mask {
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.6);
        position: fixed;
        left: 0;
        top: 0;
        z-index: 999;
      }
      .phone-ico-close {
        width: 30px;
        height: 30px;
        background: #fff url(/img/phone_close.png) center center no-repeat;
        background-size: 50% auto;
        position: absolute;
        right: -35px;
        top: 0;
      }
      .sub-content {
        position: relative;
        display: block;
        right: auto;
        border-radius: 0;
        border: none;
        box-shadow: none;
        z-index: 99999;
      }
      .lang-more {
        display: none !important;
      }
      .phone-head-items{
        position: fixed;
        padding: 0 10px;
        top: 0;
        left: 0;
        background: #000;
        width: 100%;
        height: 60px;
        line-height: 60px;
        text-align: left;
        display: flex;
        justify-content: space-between;
        z-index: 999;
        .phone_logo {
            max-width: 130px;
            img {
                max-height: 60px;
                filter:brightness(0) invert(1);
            }
            a {
                height: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
                padding: 5px;
              }
        }
        .phone-head-item {
            float: left;
            width: 48px;
            .title {
                width: 100%;
                height: 60px;
                line-height: 60px;
                overflow: hidden;
                text-align: center;
                color: #FFF;
                cursor: pointer;
                -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
                a {
                    position: relative;
                    display: block;
                    color: #FFF;
                  }
            }
        }
        .phone-head-nav .title:before {
            content: '\f0c9';
        }
        .phone-head-language .title:before {
            content: "\f1ab";
        }
        .phone-head-aside .title:before {
            content: "\f060";
        }
        .main-content-wrap {
            background: #FFF;
            top: 0;
            display: block;
            z-index: 99999;
            .content-wrap {
                overflow-y: auto;
                height: 100%;
                padding: 15px 10px;
                background-color: #fff;
                ul li {
                    font-size: 15px;
                    padding: 8px 0;
                    border-bottom: 1px #c5c5c5 dashed;
                    line-height: 30px;
                    a {
                        text-transform: capitalize;
                    }
                    ul {
                        margin-left: 20px;
                        li {
                            border-bottom: none;
                            padding: 2px 0;
                        }
                    }
                  }
            }
        }
        .phone-head-item.phone-head-aside {
            float: right;
        }
    } 
      .phone-head-item .main-content-wrap.middle-content-wrap .content-wrap {
        overflow-y: hidden;
      }
      .phone-head-item .side-content-wrap {
        position: fixed;
        display: block;
        left: -70%;
        width: 70%;
        height: 100%;
      }
      .phone-head-item .middle-content-wrap {
        position: absolute;
        left: 0;
        width: 100%;
        height: auto;
        padding: 20px 0;
        opacity: 0;
        visibility: hidden;
      }
      .phone-head-item .middle-show-content-wrap {
        top: 70px;
        visibility: visible;
        opacity: 1;
      }
      .phone-head-search .content-wrap{
          position: relative;
          height: 60px !important;
      }
      .phone-head-search .content-wrap .head-search{
          position: absolute;
          display: block !important;
          top: 50%;
          width: 100%;
          left: 50%;
          transform: translate(-50%, -50%);
      }
      .phone-head-search .content-wrap .head-search input{
          height: 60px;
          width:90%;
          margin-left: 5%;
          line-height: 60px;
        //   padding: 0 10px;
      }
       .phone-head-search .content-wrap .head-search i{
           font-size: 26px;
       }
       .phone-head-search .content-wrap .head-search .search-attr{
        display: none;
       }
       .phone-head-search .content-wrap .head-search .search-btn{
        display: none;
       }
}

.sidebarWrapper{
    position: fixed;
    right: 0;
    bottom: 200px;
    z-index:110;
    transition: all 0.5s;
    transform: translateX(260px);
    .sidebar{
        ul{
            width: 300px;
            li{
                background-color:#022156;
                margin-bottom:8px;
                padding: 8px;
                display: flex;
                align-items: center;
                border-radius:10px 0 0 10px ;
                transition: all 0.5s;
                .imgWrap{
                    width: 24px;
                    height: 24px;
                    img{
                        width: 100%;
                        height: 100%;
                    }
                }
                .info{
                    flex: 1 auto;
                    margin-left: 20px;
                    a{
                        font-size: 14px;
                        color: #fff;
                    }
                    p{
                        line-height: 30px;
                        font-size: 14px;
                        color: #fff;
                    }
                    .ewm{
                        width: 150px;
                        height: 150px;
                        img{
                            width: 100%;
                            height: 100%;
                        }
                    }
                }
                &:hover{
                    transform: translateX(-260px);
                    transition: all 0.5s;
                }
            }
            .ewmWrap{
                display: flex;
                align-items: flex-start;
                height: 40px;
                overflow: hidden;
                padding: 0;
                transition: all 0.5s;
                .imgWrap{
                    margin: 8px 0 8px 8px;
                }
                .info{
                    display: flex;
                    flex-direction: column;
                    p{
                        line-height: 40px;
                    }
                }
                &:hover{
                    height: 210px;
                    transition: all 0.5s;
                }
            }
        }
    }
   
}

/*-------------------------------
search  start
----------------------------------*/
.search-ipt {
    border: 0;
    background: transparent;
    border-radius: 0;
    -webkit-appearance: none;
}

.web-search {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    visibility: hidden;
}

.web-search .btn--search-close {
    display: inline-block;
    font-size: 1.8em;
    border-radius: 50%;
    position: absolute;
    top: 1.25em;
    right: 1.25em;
    display: none;
    background-image: url(../img/search_btn_close.png);
    background-position: center;
    background-repeat: no-repeat;
    -webkit-background-size: auto 35%;
    background-size: auto 35%;
    background-color: #ccc;
    width: 42px;
    height: 42px;
    line-height: 42px;
    cursor: pointer;
    -webkit-transition: transform .3s ease;
    -o-transition: transform .3s ease;
    transition: transform .3s ease;
}

.web-search .btn--search-close:hover {
    background-color: #16873b;
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
}

.js .btn--search-close {
    display: block;
}

.web-search .search-ipt {
    font-family: inherit;
    line-height: 1;
    display: inline-block;
    box-sizing: border-box;
    width: 75%;
    padding: 0.05em 0;
    color: #333;
    border-bottom: 3px solid;
    font-size: 20px;
    line-height: 10px
}

.web-search .search-ipt::-webkit-input-placeholder {
    color: #6e6e6e8e;
    font-weight: bold;
}

.web-search .search-ipt::-moz-placeholder {
    opacity: 1;
    color: #6e6e6e8e;
    font-weight: bold;
}

.web-search .search-ipt:-ms-input-placeholder {
    color: #6e6e6e8e;
    font-weight: bold;
}

.web-search .search-ipt::-webkit-search-cancel-button,
.web-search .search-ipt::-webkit-search-decoration {
    -webkit-appearance: none;
}

.web-search .search-ipt::-ms-clear {
    display: none;
}

.web-search .search-attr {
    font-size: 90%;
    display: block;
    width: 75%;
    margin: 0 auto;
    padding: 0.85em 0;
    text-align: right;
    color: #333;
}

.js .container {
    position: relative;
    -moz-transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
}

.js .main-wrap--move {
    height: 100vh;
}

.js .web-search {
    pointer-events: none;
}

.js .search--open {
    pointer-events: auto;
    opacity: 1;
    visibility: visible;
}

.web-search .btn--search-close {
    opacity: 0;
    -webkit-transition: opacity 0.3s ease;
    -o-transition: opacity 0.3s ease;
    transition: opacity 0.3s ease;
}

.search--open .btn--search-close {
    opacity: 1;
    -webkit-transition: transform .3s ease;
    -o-transition: transform .3s ease;
    transition: transform .3s ease;
    -webkit-animation: bounceInA 1s ease;
    -o-animation: bounceInA 1s ease;
    animation: bounceInA 1s ease;
}

.search__suggestion,
.web-search .search-attr {
    opacity: 0;
    -moz-transform: translate3d(0, 30px, 0);
    -webkit-transform: translate3d(0, 30px, 0);
    -ms-transform: translate3d(0, 30px, 0);
    -o-transform: translate3d(0, 30px, 0);
    transform: translate3d(0, 30px, 0);
    -moz-transition: opacity 0.8s, transform 0.8s;
    -webkit-transition: opacity 0.8s, transform 0.8s;
    -ms-transition: opacity 0.8s, transform 0.8s;
    -o-transition: opacity 0.8s, transform 0.8s;
    transition: opacity 0.8s, transform 0.8s;
}

.search--open .search-attr {
    opacity: 1;
    -moz-transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    font-size: 20px;
}

.js .web-search .search-ipt {
    font-size: 60px;
    font-weight: bold;
    border-bottom-width: 1px;
    padding: 15px 0;
    -moz-transform: scale3d(0, 1, 1);
    -webkit-transform: scale3d(0, 1, 1);
    -ms-transform: scale3d(0, 1, 1);
    -o-transform: scale3d(0, 1, 1);
    transform: scale3d(0, 1, 1);
    -moz-transform-origin: 0% 50%;
    -webkit-transform-origin: 0% 50%;
    -ms-transform-origin: 0% 50%;
    -o-transform-origin: 0% 50%;
    transform-origin: 0% 50%;
    -moz-transition: transform .3s;
    -webkit-transition: transform .3s;
    -ms-transition: transform .3s;
    -o-transition: transform .3s;
    transition: transform .3s;
    opacity: 0;
    text-transform: uppercase;
}

.js .web-search .search-ipt,
.web-search .search-attr {
    -webkit-transition-delay: 0.4s;
    -o-transition-delay: 0.4s;
    transition-delay: 0.4s;
}

.js .search--open .search-ipt {
    -moz-transform: scale3d(1, 1, 1);
    -webkit-transform: scale3d(1, 1, 1);
    -ms-transform: scale3d(1, 1, 1);
    -o-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
    opacity: 1;
    -moz-transition-duration: 0.4s;
    -webkit-transition-duration: 0.4s;
    -ms-transition-duration: 0.4s;
    -o-transition-duration: 0.4s;
    transition-duration: 0.4s;
}

.js .search--open .search-btn {
    display: none !important;
}

.web-search .search-attr {
    padding-bottom: 0;
}

.js .web-search {
    width: 70%;
    height: 240px;
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    padding: 50px 0;
    margin: auto;
    border-radius: 8px;
    z-index: 100001;
    perspective: 1200px;
}

.js .web-search::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    background: rgba(255, 255, 255, 0.98);
    background-color: #fff\9;
    -webkit-transform: translateY(-30%) scale(1, 0);
    -ms-transform: translateY(-30%) scale(1, 0);
    -o-transform: translateY(-30%) scale(1, 0);
    transform: translateY(-30%) scale(1, 0);
    -webkit-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
}

.js .search--open::before {
    opacity: 1;
    -webkit-transform: none;
    -ms-transform: none;
    -o-transform: none;
    transform: none;
}

.main-wrap--move:after {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    position: fixed;
    left: 0;
    top: 0;
    z-index: 100000;
}

/*-------------------------------
            search  end
            ----------------------------------*/